<style>
    .ly-map-picker .ly-map-element {
        flex: 1;
        height: 400px;
        border: 1px solid #ebedf0;
    }

    .ly-map-picker .ly-map-list-container {
        width: 380px;
        padding-left: 10px;
    }

    .amap_lib_placeSearch {
        border: 1px solid #ebedf0;
    }

    .ly-map-picker .ly-map-picker-tip {
        margin-top: 5px;
        color: #9DA9B6;
        font-size: 13px;
        line-height: 25px;
        display: block;
        clear: both;
    }

    .ly-map-picker .ly-map-list-container p.amap_lib_placeSearch {
        padding: 10px;
    }

    .amap_lib_placeSearch_page {
        padding: 8px;
        background: #fff;
        font-size: 14px;
        border-top: 1px solid #e5ecf9;
    }

    .amap-content-body {
        border: 1px solid #e5ecf9;
        border-radius: 0;
        box-shadow: none;
    }

    .amap-lib-infowindow-title {
        border-bottom: 1px #e5ecf9 solid;
        padding-bottom: 8px;
    }
    .amap-toolbar{
        z-index: 10;
    }
    .amap-overlays{
        z-index: 11;
    }
    .amap_lib_placeSearch ol, .amap_lib_placeSearch ul{
        height: 355px;
    }
    .amap_lib_placeSearch .poibox{
        min-height: 55px;
    }
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
        width: auto;
    }
</style>
<template>
    <el-form @submit.native.prevent>
        <div class="ly-map-picker" >
            <div v-if="show_address_detail">
                <input v-model="hidden_text" style="display: none">
                <el-input v-model="value.detailed"></el-input>
                <div class="ly-map-picker-tip" style="color: #C0C4CC">商家地址显示在商家主页中，请填写具体的详细地址</div>
            </div>
            <el-input v-model="value.address" @keyup.native.enter="onSearch" class="map_word"
                      placeholder="输入关键字搜索位置" :disabled="disabled"></el-input>
            <el-button type="primary" @click="onSearch" :disabled="disabled">搜索定位</el-button>
            <div class="ly-map-picker-tip" style="color: #E6A23C">输入地址信息后点击搜索定位，然后选择目标地点，才能获取准确定位哦</div>
            <div style="display: flex;margin-top: 20px;">
                <div ref="mapContainer" class="ly-map-element"></div>
                <div ref="resultListContainer" class="ly-map-list-container"></div>
            </div>
        </div>
    </el-form>
</template>
<script>
    Rap.define('', [], {
        name: 'ly-map-picker',
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        lat: 1,
                        lng: 1
                    };
                }
            },
            show_address_detail:{
                type:Boolean,
                default:true
            },
            show_detail:{
                type:Boolean,
                default:true
            },
            disabled:{
                type:Boolean,
                default:false
            },
            address_info_show: {
                type: Boolean,
                default: false,
            },
        },
        data: function () {
            return {
                hidden_text: '',
                map: null,
                mapSearcher: null
            }
        },
        watch: {
            value: {
                handler: function (val, oldVal) {
                    if (!this.map) {
                        this.setupMap();
                    } else {
                        this.map.setCenter([val.lng, val.lat]);
                    }
                },
                deep: true
            },
            address_info_show: function(newV) {
                if (newV) {
                    this.onSearch();
                }
            },
        },
        mounted: function () {
            if (this.value) {
                this.setupMap();
            } else {
                this.$emit('input', {});
            }
        },
        methods: {
            setupMap: function () {
                var me = this,
                        geocoder = null,
                        markers = [];
                var map = me.map = new AMap.Map(this.$refs.mapContainer, {
                    zoom: 14
                });
                map.on('click', function (e) {
                    map.remove(markers);
                    var location = [e.lnglat.getLng(), e.lnglat.getLat()];
                    me.value.lat = e.lnglat.getLat();
                    me.value.lng = e.lnglat.getLng();
                    var marker = new AMap.Marker({
                        position: location,
                        map: map
                    });
                    markers.push(marker);

                    geocoder.getAddress(location, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            me.value.address = result.regeocode.formattedAddress;
                        }
                    });
                });
                AMap.plugin(['AMap.ToolBar', 'AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
                    map.addControl(new AMap.ToolBar());
                    me.mapSearcher = new AMap.PlaceSearch({
                        map: map,
                        pageSize: 5,
                        panel: me.$refs.resultListContainer
                    });
                    AMap.event.addListener(me.mapSearcher, "markerClick", function (e) {
                        map.remove(markers);
                        me.$emit('save');
                        me.value.address = e.data.name;
                        if (me.show_detail){
                            me.value.address += '('+e.data.address+')';
                        }
                        me.value.lat = e.data.location.lat;
                        me.value.lng = e.data.location.lng;

                    });
                    AMap.event.addListener(me.mapSearcher, "listElementClick", function (e) {
                        map.remove(markers);
                        me.$emit('save');
                        me.value.address = e.data.name;
                        if (me.show_detail){
                            me.value.address += '('+e.data.address+')';
                        }
                        me.value.lat = e.data.location.lat;
                        me.value.lng = e.data.location.lng;
                    });
                });

                    AMap.service('AMap.Geocoder', function () {
                        geocoder = new AMap.Geocoder();
                        if (!me.value.address) {
                            geocoder.getAddress(lnglat, function (status, result) {
                                if (status === 'complete' && result.info === 'OK') {
                                    me.value.address = result.regeocode.formattedAddress;
                                    var marker = new AMap.Marker({
                                        position: lnglat,
                                        map: map
                                    });
                                    markers.push(marker);
                                }
                            });
                        }
                    });
                if (me.value.lat && this.value.lng) {
                    var currentMark = new AMap.Marker({
                        position: [this.value.lng, this.value.lat],
                        map: map
                    });
                    markers.push(currentMark);
                    map.setCenter([this.value.lng, me.value.lat]);


                } else {
                    map.plugin('AMap.Geolocation', function () {
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true,//是否使用高精度定位，默认:true
                            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                            showButton: true,        //显示定位按钮，默认：true
                            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                            zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        });
                        map.addControl(geolocation);
                        AMap.event.addListener(geolocation, 'complete', function (e) {
                            var lat = e.position.lat;
                            var lng = e.position.lng;
                            if (!me.value.lat || !me.value.lng) {
                                var currentMark = new AMap.Marker({
                                    position: [lng, lat],
                                    map: map
                                });
                                markers.push(currentMark);
                                Vue.set(me.value, 'lat', lat);
                                Vue.set(me.value, 'lng', lng);
                                Vue.set(me.value, 'address', e.formattedAddress);
                                Vue.set(me.value, 'province', e.addressComponent.province);
                                Vue.set(me.value, 'city', e.addressComponent.city);
                                me.value.address = e.formattedAddress;
                            }
                        });
                        geolocation.getCurrentPosition();
                    });
                }
                me.onSearch();
            },
            onSearch: function () {
                var me = this;
                if (!me.value.address) return;
                // 在搜索前置空经纬度
                Vue.set(me.value, 'lat', 0);
                Vue.set(me.value, 'lng', 0);
                this.mapSearcher.search(me.value.address);
            },
        }
    })
</script>
